/* pages/user/devide-status/device-status.wxss */
.device-page {
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% auto;  // 宽度100%，高度自适应
  background-position: top center;  // 从顶部居中开始显示
  padding-bottom: 160rpx; // 为底部按钮留出空间，避免内容被遮挡
}
.header {
  padding-bottom: 20rpx;
  padding-top: calc(90rpx + env(safe-area-inset-top));
  padding-left: 24rpx;
  padding-right: 24rpx;
  position: relative;
}
.header-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 60rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
  
  .left,
  .right {
    flex: 0 0 80rpx;
  }
}

.device-wrapper{
  width: 90%;
  margin: 16px auto;
}

.device-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  padding: 22rpx;
  border-radius: 14rpx;
  box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.03);
}

.device-left{
  display:flex;
  align-items:center;
}

.device-icon{
  width:40rpx;
  height:40rpx;
  margin-right:20rpx;
}

.device-name{
  font-size:30rpx;
  color:#222;
}

.device-sub{
  font-size:24rpx;
  color:#9b9b9b;
  margin-top:6rpx;
}

.device-right{
  display:flex;
  align-items:center;
  gap:12rpx;
}

.device-status{
  font-size:26rpx;
  color:#4a4a4a;
}

.battery{
  display:flex;
  align-items:center;
}

.battery-body{
  width:56rpx;
  height:26rpx;
  border:2rpx solid #cfcfcf;
  border-radius:4rpx;
  position:relative;
  overflow:hidden;
}

.battery-level{
  height:100%;
  width:50%;
  background: linear-gradient(90deg,#3dbd7d,#2ac4b4);
}

.battery-cap{
  width:6rpx;
  height:12rpx;
  background:#cfcfcf;
  margin-left:6rpx;
  border-radius:2rpx;
}

.battery-percent{
  font-size:24rpx;
  color:#4a4a4a;
}

.button-container {
  display: flex;
  flex-direction: row;
  justify-content: center;  // 居中对齐
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: transparent; // 透明背景
  padding: 20rpx 24rpx;  // 减少左右边距，让按钮更宽
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); // 适配安全区域
  gap: 16rpx;  // 按钮之间的间距
  box-sizing: border-box;
}

.bottom-button {
  flex: 1;
  min-width: 200rpx;  // 设置最小宽度，确保文字能完整显示
  white-space: nowrap; // 防止文字换行
  font-size: 26rpx !important;  // 稍微减小字体
  border-radius: 12rpx !important;
  height: 80rpx !important;
  padding: 0 12rpx !important; // 按钮内边距
}